<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-31 09:57:29
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-01-31 16:07:21
 * @FilePath: /health-gpt-website/src/components/Nav.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="navContent">
    <div class="navStyle">
      <div class="jkbIcon">
        <img src="../assets/icon/jkbIcon.png" alt="" />
      </div>
      <div class="navBox">
        <div @click="jump('/')" :class="selectedType == '/' ? 'active' : ''">
          首页
        </div>
        <div
          @click="jump('/news')"
          :class="selectedType == '/news' ? 'active' : ''"
        >
          最新动态
        </div>
        <div
          @click="jump('/aboutUs')"
          :class="selectedType == '/aboutUs' ? 'active' : ''"
        >
          关于我们
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectedType: this.$route.fullPath || '/'
    }
  },
  methods: {
    jump (v) {
      this.$router.push(v)
    },
  },
}
</script>
<style lang="less">
.navContent {
  width: 100%;
  display: flex;
  justify-content: center;
  .navStyle {
    width: 1200px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 15px;
    .jkbIcon {
      width: 191px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .navBox {
      display: flex;
      align-items: center;
      .active {
        color: #123be7;
      }
      div {
        margin-left: 60px;
        font-size: 1rem;
        cursor: pointer;
      }
      div:hover {
        color: #123be7;
      }
    }
  }
}
</style>